<template>
	<view class="pages" ref="pageContent" id="pageContent">
		
		<!-- 头部 -->
		<!-- <html2canvas ref="html2canvas" :domId="domId" @renderFinish="renderFinish"> -->
		<view class="share">
		<pagehead :back="1">推广分享</pagehead>
		<view class="info">
			<view class="avatar" v-if="JSON.stringify(usermsg)!='{}'" v-show="usermsg.avatar"
					:style="{background:'url('+usermsg.avatar+') 100% /cover no-repeat'}">
				</view>
				<view class="avatar" v-else
					:style="{background:'url('+IMAGE_STATIC+'/images/logo.png) 100% /cover no-repeat'}">
				</view>
				<view class="name">
					{{usermsg.real_name?usermsg.real_name:'待实名'}}
				</view>
				<view class="txt">我的邀请码</view>
				<view class="code">
					{{usermsg.uid?usermsg.uid:''}}
				</view>
				<view class="copy" @click="$tools.copy(usermsg.uid)">复制</view>
		</view>
		<view class="qrocde" @tap.stop="inviteImgShow = true">
			<image v-if="ewmImg != ''" :src="ewmImg" mode="" class="image"/>
		</view>
	</view>
		<!-- </html2canvas> -->
		<view class="modal" v-if="inviteImgShow1">
			<view class="modal-bg" @tap.stop="inviteImgShow = false">
				<!-- <image :src="hbUrl" mode="widthFix"></image> -->
				<view class="modal-box">
					<canvas :style="{ width: picWidth + 'px', height: picHight + 'px' }"
					canvas-id="myCanvas" id="myCanvas"></canvas>
				</view>
				
				<view class="btnBox">
					<view class="btnBox-btn" @tap.stop="saveHB()">
						保存图片
					</view>
				</view>
			</view>
		</view>
		<view v-if="inviteImgShow" ref="sortPopu" class="model-bg" @tap="inviteImgShow = false">
			<view class="modal" @tap.stop="inviteImgShow = true">
				<view class="ul">
					<!-- #ifdef MP-WEIXIN -->
					<view class="li" @tap.stop="saveHB1()">保存图片</view>
					<button class="li" open-type="share">分享</button>
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<view class="li" @tap.stop="saveHB()">保存图片</view>
					<button class="li" @tap.stop="shareWeinx()">分享</button>
					<!-- #endif -->
				</view>
				<view class="ul">
					<view class="li"  @tap.stop="inviteImgShow = false">取消</view>
				</view>
			</view>

		</view>
		<canvas :style="{ width: picWidth + 'px', height: picHight + 'px' }"
					canvas-id="myCanvas" id="myCanvas"></canvas>
		<!-- <iframe ref="iframe" :src="`${webViewSrc}`" width="100%" height="100%" frameborder="0" style=""></iframe> -->
		<!-- <web-view :src="webViewSrc" @message="onMessage"></web-view> -->
	</view>
</template>

<script>
// import html2canvas from '@/components/html2canvas/html2canvas.vue'
	import QR from './qrcode/qrcode';
	// import html2canvas from 'html2canvas';
	export default {
		components:{ 
			// html2canvas
		},
		data(){
			return{
				IMAGE_STATIC: this.$url.assetsPath,
				IMAGE_PREFIX: this.$url.urlPath,
				domId: '',
				inviteList: [],
				pageIndex: 1,
				pageSize: 10,
				usermsg: {},
				appkey: '',
				access_token: '',
				openlink: '',
				wxaqrcodeObj: {},
				size: 100,
				
				inviteImgShow: false,
				canvasW: 0, // 画布宽
				canvasH: 0, // 画布高
				picWidth: '', //图片宽
				picHight: '', //图片高
				SystemInfo: {}, // 设备信息
				goodsImg: {}, // 主图
				ewmImg: '', // 二维码图片
				ewmW: 160, // 二维码大小
				hbUrl: ''  ,// 保存的图片地址
				ewmImg2: '',
				shareUrl: '',
				shareImg: '',
				inviteImgShow1:false,
				poster:'',
				jiazai:false,
			}
		},
		onLoad() {
			this.usermsg = uni.getStorageSync('usermsg');
			console.log("usermsg：",this.usermsg);
			this.getMyCanvas()
			// #ifdef MP-WEIXIN || MP
			// this.getAppKey();
			// #endif
			// uni.showShareMenu({
			// 	//小程序的原生菜单中显示分享按钮，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
			// 	menus:["shareAppMessage","shareTimeline"] //不设置默认发送给朋友
			// })
		},
		onShareAppMessage(res) {
			if (res.from === 'button') {// 来自页面内分享按钮
			  console.log('button',res.target);
			}
			if (res.from === 'menu') {// 来自页面内分享按钮
			  console.log('menu',res.target);
			}
			return {
				title: '启航掌柜',
				// path: '/pages/index/index?inviteUserId='+ this.globalData.userId,  // 路径，传递参数到指定页面。
				path: '/pagesMain/index/index?inviteUserId='+ this.usermsg.uid,  // 路径，传递参数到指定页面。
				imageUrl: this.IMAGE_STATIC+'/images/logo.png',     //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
			}
		},
		onShow() {
			this.init();
		},
		mounted() {
			this.$nextTick(() => {
			    // 确保视图完全渲染
				this.domId = '.share'
			});
			// #ifdef H5
			// 监听iframe页面点击按钮触发事件
			// window.addEventListener('message', (event) => {
			// 	const data = event.data.data
			// 	if (data.code === 'success') {
			// 		console.log('iframe',data)
			// 		this.poster = data.src
			// 		uni.hideLoading(); 
			// 	}
			// })
			// // #endif
			// uni.$on('message', (data) => {
			// 	console.log('接收到消息:', data);
			// 	console.log('iframe',data)
			// 	this.poster = data.src
			// 	uni.hideLoading(); 
			// });
		},
		methods: {
			renderFinish(filePath) {
				this.poster = filePath;
				if(filePath!=''){
					this.jiazai=true
				}
				//blob格式转换为base64格式
				// this.blobToBase64(filePath, function (result) {
				// 		// 这里面写对应的方法
				// 		// result是转换后的数据
				// 		console.log('result',result)
				// });
				// console.log("filePath", filePath)
			},
			init(){
				const real_name = this.usermsg.real_name || ''
				this.shareUrl = this.IMAGE_STATIC +'/#/?invite='+ this.usermsg.uid+'&inviteName='+real_name;
				console.log(this.shareUrl);
				this.ewmImg = this.creatQrcode(this.shareUrl);
				this.hbUrl = this.ewmImg
				// this.webViewSrc = 'http://127.0.0.1:5500/%E6%98%93%E4%BC%97%E9%82%A6%E9%82%80%E8%AF%B7%E6%B3%A8%E5%86%8C/static/html2canvas/html2canvas.html?real_name='+this.usermsg.real_name
				this.webViewSrc = this.IMAGE_STATIC+'/html2canvas/html2canvas.html?real_name='+this.usermsg.real_name
				// this.webViewSrc = '/static/html2canvas/html2canvas.html?real_name='+this.usermsg.real_name
				+'&uid='+this.usermsg.uid+'&shareUrl='+this.IMAGE_STATIC
				// this.createwxaqrcode();
				// this.pageIndex = 1;
				// this.inviteList = [];
				// this.getInviteList();
			},
			creatQrcode(url) {
				if (url == '') {
					return false;
				}
				let img = QR.createQrCodeImg(url);
				return img;
			},
			showImg(){
				this.inviteImgShow = true;
				this.getMyCanvas();
			},
			async getMyCanvas1(){
				let that = this;
				// 获取设备信息，获取设备的宽高，画布做一样的高度
				that.SystemInfo = await that.getSystemInfo();
				console.log('that.SystemInfo', that.SystemInfo)
				that.canvasW = that.SystemInfo.windowWidth; // 画布宽度
				that.canvasH = that.SystemInfo.windowHeight - 150; //画布高度
				//获取背景图片的长与宽，按画布的比例进行缩放
				that.goodsImg = await that.getImageInfo(this.IMAGE_STATIC+'/userimage/share-bg.png'); //获取照片信信息
				// console.log("that.goodsImg:",that.goodsImg);
				that.picWidth = that.canvasW - 30;
				that.picHight = that.picWidth * that.goodsImg.height / that.goodsImg.width;
				// 如果主图，二维码图片，设备信息都获取成功，开始绘制海报，这里需要用setTimeout延时绘制，否则可能会出现图片不显示。
				if (that.goodsImg.errMsg == 'getImageInfo:ok' 
					&& that.SystemInfo.errMsg == 'getSystemInfo:ok'
				) {
					console.log('ok---二维码生成中');
					uni.showLoading({
						title: "二维码生成中"
					})
					setTimeout(() => {
						var ctx = uni.createCanvasContext('myCanvas');
						// 填充背景色，白色
						// ctx.setFillStyle('#fff'); // 默认白色
						// ctx.fillRect(0, 0, that.canvasW, that.canvasH) // fillRect(x,y,宽度，高度)
						// 绘制商品主图，二维码
						// ctx.drawImage(that.goodsImg.path, 15, 15, that.picWidth, that.picHight)
						// ctx.drawImage(that.ewmImg, 110, that.canvasH / 3.8, that.ewmW, that.ewmW)
						ctx.drawImage(that.goodsImg.path, 0, 0, that.picWidth, that.picHight)
						//  #ifdef APP-NVUE || H5
							ctx.drawImage(that.ewmImg, 95, that.canvasH / 4.2, that.ewmW, that.ewmW)
						// #endif
						//  #ifdef MP-WEIXIN
							ctx.drawImage(that.ewmImg2, 95, that.canvasH / 4.2, that.ewmW, that.ewmW)
						// #endif
						ctx.draw(true, (ret) => { // draw方法 把以上内容画到 canvas 中。
							uni.hideLoading();
							console.log("ret：",ret);
							uni.canvasToTempFilePath({ // 保存canvas为图片
								canvasId: 'myCanvas',
								quality: 1,
								complete: (res) => {
									console.log("图片res：",res);
									that.hbUrl = res.tempFilePath;
									console.log("保存的图片：",res.tempFilePath);
								},
							})
						});
					}, 1000)
				} else {
					console.log('err')
				}
				uni.showShareMenu({
					withShareTicket: true,
					menus: ["shareAppMessage", "shareTimeline"]
				})
			},
			async getMyCanvas(){
				const that  = this
				// 获取Canvas元素和其2D上下文
					// var canvas = document.getElementById('myCanvas');
					// var ctx = canvas.getContext('2d');
					var ctx = uni.createCanvasContext('myCanvas');
					that.SystemInfo = await that.getSystemInfo();
					console.log('that.SystemInfo', that.SystemInfo)
					that.canvasW = that.SystemInfo.windowWidth; // 画布宽度
					that.canvasH = that.SystemInfo.windowHeight - 150; //画布高度
					// 加载图片和绘制
					var images = [
							'path/to/image1.jpg',
							'path/to/image2.jpg'
					];
					var text = "这里是文字信息";
					
					Promise.all(images.map(src => loadImage(src))).then(images => {
							// 绘制图片
							images.forEach((image, index) => {
									ctx.drawImage(image, 0 + index * 100, 0); // 假设每张图片宽度为100px
							});
					
							// 绘制文字
							ctx.font = '20px Arial';
							ctx.fillStyle = 'black';
							ctx.fillText(text, 10, 50); // 文本位置调整
					
							// 将Canvas内容导出为图片
							var img = new Image();
							img.src = canvas.toDataURL('image/png');
							document.getElementById('finalImage').src = img.src;
					});
					function loadImage(src) {
									return new Promise((resolve, reject) => {
											const image = new Image();
											image.onload = () => resolve(image);
											image.onerror = reject;
											image.src = src;
									});
							}
			},
			saveHB1(){
				const that = this
				// console.log('ewmImg',this.ewmImg)
				// 假设 base64Data 是你的 base64 图片数据
				// base64ImgUrl 是你要保存图片的Base64字符串
				// let saveImg=this.ewmImg.replace(/^data:image\/\w+;base64,/, "");//去掉data:image/png;base64,
				let saveImg = this.poster
				console.log('poster',this.poster)
				// console.log('saveImg',saveImg)
				uni.getFileSystemManager().writeFile({
					filePath: wx.env.USER_DATA_PATH + '/imageName.png',
					data: saveImg,
					encoding: 'base64',
					success: res2 => {
						// 请求授权
					uni.authorize({
						scope: 'scope.writePhotosAlbum',
						success() {
							// 用户已授权，可以保存图片
							that.downSaveImage(wx.env.USER_DATA_PATH + '/imageName.png')
						},
						fail() {
							// 用户拒绝授权，需引导用户到设置页面开启权限
							// that.$tools.toast('您未授权保存图片到相册，请先前往设置页面进行授权')
							// 用户已拒绝授权，提示用户授权
							uni.showModal({
								title: '提示',
								content: '您未授权保存图片到相册，是否前往设置页面进行授权？',
								success: function (res) {
									if (res.confirm) {
										uni.openSetting({
											success: function (res) {
												if (res.authSetting['scope.writePhotosAlbum']) {
													// 用户已授权，可以保存图片
													that.downSaveImage(wx.env.USER_DATA_PATH + '/imageName.png')
												}
											},
										})
									} else if (res.cancel) {
										that.$tools.toast('您取消了授权')
									}
								},
							})
							that.inviteImgShow = false
						}
					});
					},
					fail: err2 => {
							console.log(err2)
					}
				})
			},
			saveHB() {
				uni.showLoading({
					mask:true,
					title: '海报生成中'
				})
				const that = this
				console.log('poster',this.poster)
				// #ifdef H5
				this.exportImage(this.poster)
				// #endif

				// #ifdef APP-PLUS
				// 假设base64Data是你的图片的base64编码字符串
				this.saveAppImg(this.poster)
				// #endif
			},
			// app端保存图片
			saveAppImg(base64str){
				const that = this
				const bitmap = new plus.nativeObj.Bitmap("test");
						// 从本地加载Bitmap图片
				bitmap.loadBase64Data(base64str, function() {
					const url = "_doc/imageName_" + (new Date()).getTime() + ".png";  // url为时间戳命名方式
					console.log('url',url)
					bitmap.save(url, {
							overwrite: true,  // 是否覆盖
							// quality: quality  // 图片清晰度
					}, (i) => {
							uni.saveImageToPhotosAlbum({
									filePath: url,
									success: function() {
										that.$tools.toast('图片已保存到相册')
									}
							});
							that.inviteImgShow = false
					}, (err) => {
						console.log(err)
						that.inviteImgShow = false
						that.$tools.toast('图片保存失败',err.message)
					});
				}, (err) => {
					console.log(err)
					that.inviteImgShow = false
					that.$tools.toast('图片保存失败',err.message)
				});
				uni.hideLoading(); 
			},
			// h5下载图片
			exportImage(response, fileName) {
				// 将base64格式的图片转换成Blob对象
				// var arr = base64str.split(","),
				// 	mime = arr[0].match(/:(.*?);/)[1],
				// 	bstr = atob(arr[1]),
				// 	n = bstr.length,
				// 	u8arr = new Uint8Array(n);
				// while (n--) {
				// 	u8arr[n] = bstr.charCodeAt(n);
				// }
				// // 将Blob对象转换成文件并下载到本地
				// var blob = new Blob([u8arr], {
				// 	type: 'image/png'
				// });
				// console.log('blob',blob)
				// var a = document.createElement('a');
				// a.download = 'imageName';
				// a.href = URL.createObjectURL(blob);
				// a.click();
				// 创建a标签
					let a = document.createElement("a");
					a.download = 'imageName';
					// 创建二进制对象
					const blob = new Blob([response], {
						type: 'image/png'
					});
					const downloadURL = (window.URL || window.webkitURL).createObjectURL(blob);
					a.href = downloadURL;
					// 模拟点击
					a.click();
					//释放资源并删除创建的a标签
					URL.revokeObjectURL(downloadURL);// a.href
					document.body.removeChild(a);
				uni.hideLoading(); 
			},
			// 微信小程序授权之后保存图片功能
			downSaveImage(imgurl) {
				const that = this
				uni.getImageInfo({
					src: imgurl,
						success: function(res) {
						let path = res.path;
						console.log('path',res)
						uni.saveImageToPhotosAlbum({
							filePath: wx.env.USER_DATA_PATH + '/imageName.png',
							success: function() {
									//保存成功
									console.error('图片已保存到相册:', wx.env.USER_DATA_PATH);
									that.$tools.toast('图片已保存到相册')
									that.inviteImgShow = false
							},
							fail: function(err) {
									//保存失败
									console.error('保存图片失败：', err);
									that.$tools.toast('保存图片失败：'+err.errMsg)
									that.inviteImgShow = false
							}
						})
					}
				})
			},
			// H5或app 端分享
			shareWeinx(){
				// #ifdef APP-PLUS
				// 分享图文
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: this.$url.urlPath,
					title: "启航掌柜",
					summary: "启航掌柜自主创新网络诚信体系，秉承“公平公正、诚信、双赢”的理念，利用自身开发优势，构架支付规范模型。",
					imageUrl:  this.$url.assetsPath+'/images/logo.png',
					success: function (res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
				// 分享到小程序
				// uni.share({
				// provider: 'weixin',
				// scene: "WXSceneSession", //分享类型（聊天，朋友圈）
				// type: 5,//类型 
				// title: "启航掌柜",
				// imageUrl: this.$url.assetsPath+'/images/logo.png',//不能大于20kb
				// miniProgram: {
				// 	id: "gh_32ee067a8084",//小程序原始ID
				// 	path: "pagesMain/index/index",//小程序页面路径，传参也是?拼接
				// 	webUrl: this.$url.urlPath,//地址
				// 	type: 2 //微信小程序版本类型，可取值： 0-正式版； 1-测试版； 2-体验版。 默认值为0。
				// },
				// success: res => {
				// 	console.log(res);
				// },
				// fail: function(err) {
				// 		console.log(err);
				// }
				// });
				// #endif
				// #ifdef H5
				const url = this.$url.urlPath
					location.href = url;
				// #endif
			},
			blobToBase64 (blob, callback){
				var reader = new FileReader();
				reader.readAsDataURL(blob);
				reader.onload = function (e) {
					callback(e.target.result);
				};
			},
			// 获取图片信{息
			getImageInfo(image) {
				return new Promise((req, rej) => {
					uni.getImageInfo({
						src: image,
						success: (res) => {
							req(res)
						},
					});
				})
			},
			// 获取设备信息
			getSystemInfo() {
				return new Promise((req, rej) => {
					uni.getSystemInfo({
						success: function(res) {
							req(res)
						}
					});
				})
			},
			// 生成二维码
			createwxaqrcode(){
				let that = this;
				that.$Ajax('/userinfo/app/getUnlimitedQRCode',{
					// path: 'pages/index/index?inviteUserId='+ that.usermsg.userId, // 必须是已经发布的小程序存在的页面（否则报错）,that.code就是邀请码
					page: 'pagesMain/index/index', // 必须是已经发布的小程序存在的页面（否则报错）,that.code就是邀请码
					scene: that.usermsg.userId, 
					// scene: "inviteUserId=" + that.usermsg.userId, 
				},res => {
					that.ewmImg = "data:image/PNG;BASE64," + uni.arrayBufferToBase64(res.data); //以图片的形式展示
					// that.ewmImg = "data:image/png;base64," + res.data; //以图片的形式展示
					// console.log("ewmImg：",that.ewmImg);
					// const fs = uni.getFileSystemManager();
					//随机定义路径名称
					// var times = new Date().getTime();
					// var codeimg = wx.env.USER_DATA_PATH + '/' + times + '.png';
					//将base64图片写入
					// fs.writeFile({
					// 	filePath: codeimg,
					// 	data: that.ewmImg.slice(22),
					// 	encoding: 'base64',
					// 	success: (res) => {
					// 		console.log('codeimg',codeimg)
					// 		that.ewmImg2 = codeimg;
					// 	}
					// });
				},err =>{},'GET')
			},
			share1(){
				let that = this;
				console.log('我是分享');  //打印出来的就是:data-item='item'里的'item'值
				let times = new Date().getTime();
				let url = 'https://api.anyueqc.cn/share/share.html?inviteUserId='+ this.usermsg.userId+'&times='+times;
				that.$tools.copy(url);
				console.log("openlink：",that.openlink);
				// that.$tools.copy(url);
				location.href = 'weixin://dl/business/?inviteUserId='+ this.usermsg.userId
			},
			getApp(){
				let that = this;
				uni.request({
					url: 'https://api.weixin.qq.com/wxa/generatescheme?access_token='+that.access_token,
					method:'POST',
					data: {
						"jump_wxa":{
							"path": "pagesMain/index/index",   //  pages前面不能有斜杠
							"query": "?inviteUserId="+ this.usermsg.userId,
							// "envVersion": "develop",   // 正式版为"release"，体验版为"trial"，开发版为"develop"，
						},
						"is_expire":false,
						// "env_version": "develop"
					},
					success(res) {
						console.log('openlink', res)
						if(res.data.errmsg == 'ok'){
							that.openlink = res.data.openlink;
						}
					},
					fail(err) {
						console.log("data:",data,typeof(data));
						console.log('err', err);
					}
				})
			},
			getAccessToken(){
				let that = this;
				uni.request({
					url: 'https://api.weixin.qq.com/cgi-bin/token',
					method:'GET',
					data: {
						appid: that.$url.wxId,
						secret: that.appkey,
						grant_type: "client_credential",
					},
					success(res) {
						console.log('access_token', res)
						that.access_token = res.data.access_token;
						that.getApp();
						// that.createwxaqrcode();
					},
					fail(err) {
						console.log('err', err);
					}
				})
			},
			getAppKey(){
				let that = this;
				that.$Ajax('/userinfo/app/config',{},res => {
					if (res.code == 200) {
						that.appkey = res.data.appSecret;
						// that.getAccessToken();
					}
				},err =>{},'GET')
			},
			// 邀请用户列表
			getInviteList() {
				let that = this;
				that.$Ajax('/userinfo/inviteList', {
					pageIndex: that.pageIndex,
					pageSize: that.pageSize
				}, res => {
					if(res.code == 200){
						that.pages = res.data.pages;
						that.inviteList = that.inviteList.concat(res.data.list);
					}
				}, err => {}, 'GET')
			},
			lower(e) {
				console.log("ddd")
				if (this.pageIndex >= this.pages) {
					return this.$tools.toast('到底了');
				} else {
					this.pageIndex++;
					console.log("+++")
					this.getInviteList();
				}
			},
			/* 弹出框公用 */
			openPopup(e) {
				this.$refs[e].open();
			},
			hidePopup(e) {
				this.$refs[e].close();
			},
			changePopup(e) {
				this.typePopup = e.type;
				console.log('popup ' + e.type + ' 状态', e.show);
			},
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .header_fixed{
		background: none !important;
	}
	/deep/ .header_fixed{
		background: none   !important;
	}
	.share{
		width: 100%;
		height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 99999;
		background: url($uni-static-dir+'/userimage/share-bg.png') 100% no-repeat;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		// opacity: 0;
	}
	iframe,web-view{
		opacity: 0;
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 1;
	}
	.pages{
		width: 100%;
		height: 100vh;
		// background: url($uni-static-dir+'/userimage/share-bg.png') 100% no-repeat;
		// background-repeat: no-repeat;
		// background-size: 100% 100%;
		// height: 620rpx;
		// position: absolute;
		// /*  #ifdef H5 || APP-PLUS  */
		// top: -80rpx;
		// /*  #endif   */
		// /*  #ifdef MP-WEIXIN  */
		// top: -76rpx;
		// /*  #endif   */
		.info{
			margin-top: 178rpx;
			text-align: center;
			.avatar{
				width: 108rpx;
				height: 108rpx;
				margin: auto;
				border-radius: 100%;
			}
			.name{
				margin-top: 16rpx;
				font-weight: 600;
				font-size: 28rpx;
				color: #333333;
				line-height: 33rpx;
			}
			.txt{
				margin-top: 16rpx;
				font-size: 24rpx;
				color: #333333;
				line-height: 28rpx;
			}
			.code{
				margin-top: 36rpx;
				font-family: Inter, Inter;
				font-weight: bold;
				font-size: 36rpx;
				color: #333333;
				line-height: 84rpx;
			}
			.copy{
				width: 150rpx;
				text-align: center;
				margin: auto;
				margin-top: 40rpx;
				height: 50rpx;
				line-height: 50rpx;
				border-radius: 20rpx;
				background: #AD2926;
				font-size: 30rpx;
				color: #FFFFFF;
				border-radius: 72rpx;
			}
		}
		.qrocde{
			width: 316rpx;
			height: 316rpx;
			margin: auto;
			margin-top: 80rpx;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			border: 2rpx solid #E6E6E6;
			.image{
				width: 316rpx;
				height: 316rpx;
			}
		}
	}
	.model-bg{
		top: 0;
		background-color: rgba(0, 0, 0, 0.4);
		transition-duration: 0.3s;
	}
	.modal{
		top: auto;
		bottom: 20rpx;
		background: transparent;
		width: 98%;
		left: 1%;
		.ul{
			background: #fff;
			margin-top: 20rpx;
			border-radius: 20rpx;
			overflow: hidden;
			.li{
				background: #fff;
				text-align: center;
				height: 88rpx;
				line-height: 88rpx;
				// padding: 20rpx 18rpx;
				text-align: center;
				font-size: 36rpx;
				text-overflow: ellipsis;
				overflow: hidden;
				cursor: pointer;
			}
		}
	}
	
	.share{
		position: relative;
		z-index: 3;
		&-height{
			height: calc(100vh - 650rpx);
		}
		&-box{
			@include flexCenterColumn;
			position: relative;
			z-index: 3;
		}
		&-title{
			font-size: 36rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: $globalColor-fontStyle;
			margin: 80rpx 0 0rpx;
		}
		&-btn{
			font-size: 36rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: $globalColor-fontStyle;
			border: 1px solid $globalColor-fontStyle;
			padding: 12rpx 90rpx;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
		}
		&-wrapper{
			margin: 100rpx 0 0;
			background: $globalColor-white;
			padding: 40rpx;
		}
		&-header{
			@include flexLeft;
			border-bottom: 1px solid $globalColor-border;
			padding-bottom: 34rpx;
			.tips{
				width: 4rpx;
				height: 32rpx;
				background: #AD2926;
				margin-right: 20rpx;
			}
			.head{
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
			}
		}
		&-list{
			
		}
		&-item{
			@include flexBetween;
			margin-top: 40rpx;
		}
		&-left{
			@include flexLeft;
			.logo{
				width: 52rpx;
				height: 52rpx;
				margin-right: 20rpx;
				border-radius: 50%;
			}
		}
		&-name{
			font-size: 30rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: $globalColor-fontStyle;
		}
		&-time{
			font-size: 30rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #888B95;
		}
	}
	.noStyle{
		width: 396rpx !important;
		padding: 0 !important;
		margin: 30rpx 0 0 !important;
		background: none !important;
		height: 80rpx  !important;
		line-height: 80rpx !important;
	}
</style>